/* bg color */
.bg-red {
  background-color: #e54d42;
  color: #fff;
}
.bg-green {
  background-color: #39b54a;
  color: #fff;
}
.bg-white {
  background-color: #fff;
  color: #666;
}
.bg-winblack {
  background-image: linear-gradient(#262432, #1d1a39);
  color: #fff;
}
.bg-orange {
  color: #fff;
  background-color: #f37b1d;
}
.bg-red.light {
  color: #e54d42;
  background-color: #fadbd9;
}
.bg-orange.light {
  color: #f37b1d;
  background-color: #fde6d2;
}
.bg-yellow.light {
  color: #fbbd08;
  background-color: rgba(254, 242, 206, 0.8235294117647058);
}
.bg-olive.light {
  color: #8dc63f;
  background-color: #e8f4d9;
}
.bg-green.light {
  color: #39b54a;
  background-color: #d7f0db;
}
.bg-cyan.light {
  color: #1cbbb4;
  background-color: #d2f1f0;
}
.bg-blue.light {
  color: #351292;
  background-color: #f6f1ff;
}
.bg-purple.light {
  color: #6739b6;
  background-color: #e1d7f0;
}
.bg-mauve.light {
  color: #9c26b0;
  background-color: #ebd4ef;
}
.bg-pink.light {
  color: #e03997;
  background-color: #f9d7ea;
}
.bg-brown.light {
  color: #a5673f;
  background-color: #ede1d9;
}
.bg-grey.light {
  color: #8799a3;
  background-color: #e7ebed;
}
.line-orange,
.lines-orange,
.text-orange {
  color: #f37b1d;
}
.line-red,
.lines-red,
.text-red {
  color: #e54d42;
}
.line-green,
.lines-green,
.text-green {
  color: #39b54a;
}
.line-red,
.lines-red,
.text-red {
  color: #e54d42;
}
.line-gray,
.lines-gray,
.text-gray {
  color: #aaa;
}
.line-primary,
.lines-primary,
.text-primary {
  color: @primary;
}
.block {
  display: block;
}
.text-line {
  text-decoration: underline;
}
.text-bold {
  font-weight: 600;
}
.text-center {
  text-align: center;
}
.text-content {
  line-height: 1.6;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
/* font size */
.text-xs {
  font-size: 20px;
}
.text-sm {
  font-size: 24px;
}
.text-df {
  font-size: 28px;
}
.text-lg {
  font-size: 32px;
}
.text-xl {
  font-size: 36px;
}
.text-xxl {
  font-size: 42px;
}
.text-xxxl {
  font-size: 62px;
}
.text-red {
  color: #e54d42;
}
.text-green {
  color: #39b54a;
}

.shadow[class*='-red'] {
  box-shadow: 12px 12px 16px rgba(204, 69, 59, 0.2);
}
.shadow[class*='-green'] {
  box-shadow: 12px 12px 16px rgba(48, 156, 63, 0.2);
}
.shadow[class*='-black'],
.shadow[class*='-white'] {
  box-shadow: 12px 12px 16px rgba(26, 26, 26, 0.2);
}
.shadow[class*="-gray"],
.shadow[class*="-grey"] {
  box-shadow: 0.16rem 0.16rem 0.21333rem rgba(114, 130, 138, 0.2);
}
.shadow[class*="-black"],
.shadow[class*="-white"] {
  box-shadow: 0.16rem 0.16rem 0.21333rem rgba(26, 26, 26, 0.2);
}
.solid {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.radius {
  border-radius: 12px;
}
/* padding */
.margin-top-xs {
  margin-top: 10px;
}
.margin-top-sm {
  margin-top: 20px;
}
.margin-top {
  margin-top: 30px;
}
.margin-top-lg {
  margin-top: 40px;
}
.margin-top-xl {
  margin-top: 50px;
}
.margin-right-xs {
  margin-right: 10px;
}
.margin-right-sm {
  margin-right: 20px;
}
.margin-right {
  margin-right: 30px;
}
.margin-right-lg {
  margin-right: 40px;
}
.margin-right-xl {
  margin-right: 50px;
}
.margin-bottom-xs {
  margin-bottom: 10px;
}
.margin-bottom-sm {
  margin-bottom: 20px;
}
.margin-bottom {
  margin-bottom: 30px;
}
.margin-bottom-lg {
  margin-bottom: 40px;
}
.margin-bottom-xl {
  margin-bottom: 50px;
}
.margin-left-xs {
  margin-left: 10px;
}
.margin-left-sm {
  margin-left: 20px;
}
.margin-left {
  margin-left: 30px;
}
.margin-left-lg {
  margin-left: 40px;
}
.margin-left-xl {
  margin-left: 50px;
}

.margin {
  margin: 30px;
}
.margin-0 {
  margin: 0;
}
.margin-xs {
  margin: 10px;
}
.margin-sm {
  margin: 20px;
}
.padding {
  padding: 30px;
}
.padding-0 {
  padding: 0;
}
.padding-xs {
  padding: 10px;
}
.padding-sm {
  padding: 20px;
}
.padding-tb-sm {
  padding-top: 20px;
  padding-bottom: 20px;
}
.padding-tb-md {
  padding-top: 30px;
  padding-bottom: 30px;
}

.padding-lr-xs {
  padding-left: 10px;
  padding-right: 10px;
}
.padding-lr-sm {
  padding-left: 20px;
  padding-right: 20px;
}
.padding-lr {
  padding-left: 30px;
  padding-right: 30px;
}
.padding-lr-lg {
  padding-left: 40px;
  padding-right: 40px;
}
.padding-lr-xl {
  padding-left: 50px;
  padding-right: 50px;
}

.margin-tb-sm {
  margin-top: 20px;
  margin-bottom: 20px;
}
.margin-tb-md {
  margin-top: 30px;
  margin-bottom: 30px;
}
.margin-lr-xs {
  margin-left: 10px;
  margin-right: 10px;
}
.margin-lr-sm {
  margin-left: 20px;
  margin-right: 20px;
}
.margin-lr-md {
  margin-left: 30px;
  margin-right: 30px;
}
/* flex box */
.flex {
  & {
    display: flex;
  }
  &-sub {
    flex: 1;
  }
  &-flex > * {
    display: flex;
  }
  // 垂直水平居中
  &-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 水平布局
  &-row {
    display: flex;
    flex-direction: row;
    // 子元素默认平均分布
    > * {
      display: block;
    }
    // 反向
    &-rev {
      flex-direction: row-reverse;
    }
  }
  // 垂直布局
  &-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    &-rev {
      flex-direction: column-reverse;
    }
  }
  &-wrap {
    flex-wrap: wrap;
  }
  // 主轴方向对齐方式
  &-jc {
    &-center {
      justify-content: center;
    }
    &-start {
      justify-content: flex-start;
    }
    &-end {
      justify-content: flex-end;
    }
    &-between {
      justify-content: space-between;
    }
    &-around {
      justify-content: space-around;
    }
  }
  // 侧轴方向对齐方式
  &-ai {
    display: flex;
    &-center {
      align-items: center;
    }
    &-start {
      align-items: flex-start;
    }
    &-end {
      align-items: flex-end;
    }
    &-baseline {
      align-items: baseline;
    }
  }

  // 多行布局对齐方式
  &-ac {
    display: flex;
    &-center {
      align-content: center;
    }
    &-start {
      align-content: flex-start;
    }
    &-end {
      align-content: flex-end;
    }
    &-between {
      align-content: space-between;
    }
    &-around {
      align-content: space-around;
    }
  }
}

@keyframes scale1 {
  0%,
  100% {
    transform: scale(1/7);
  }

  50% {
    transform: scale(1);
  }
}

.m-avatar-box {
  display: inline-block;
  position: relative;
  // margin: 0 auto;
  flex: none;
  width: 76px;
  height: 76px;
  background: transparent center / cover no-repeat;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  img,
  .m-avatar-img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  i,
  .m-avatar-icon {
    overflow: hidden;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 38/120 * 100%;
    height: 38/120 * 100%;
    background-color: #fff;
    border-radius: 50%;
    z-index: 7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  &:after {
    content: '';
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(230, 230, 230, 0.5); /* no */
    border-radius: 50%;
  }
  &.def,
  &-def {
    width: 76px;
    height: 76px;
    line-height: 76px;
  }
  &.big,
  &-big {
    width: 140px;
    height: 140px;
    line-height: 140px;
    background-color: #fff;
    border: 4px solid #fff;
  }
  &.small,
  &-small {
    width: 52px;
    height: 52px;
    line-height: 52px;
  }
  &.tiny,
  &-tiny {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
  &.nano,
  &-nano {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 22px;
  }

  .secret,
  &-0,
  &-secret {
    background-image: url('../icons/img/secret.svg');
  }
  .man,
  &-1,
  &-man {
    background-image: url('../icons/img/man.svg');
  }
  .woman,
  &-2,
  &-woman {
    background-image: url('../icons/img/woman.svg');
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rotate {
  animation: rotate360 2s infinite ease;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* 旋转动画 */
@keyframes turn-around {
  from {
    transform: rotate(1deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.turn-around {
  animation-name: turn-around;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

::-webkit-scrollbar {
  display: none;
}
